<template>
  <div>
    <div class="list1">
        <el-select v-model="selectvalue" class="select1" size="medium" clearable placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-input class="input2" size="medium" v-model="input1" placeholder="单元名称"></el-input>
        <el-input class="input1" size="medium"  v-model="input2" placeholder="幢号"></el-input>
        <el-input class="input1" size="medium"  v-model="input3" placeholder="房号"></el-input>
        <el-input class="input1" size="medium"  v-model="input4" placeholder="住客姓名"></el-input>
        <el-button class="button1" icon="el-icon-search" @click="lookfor" >查询</el-button>
        <el-button class="button2" type="success" @click="exportdata"><i class="el-icon-upload2"></i>批量导出</el-button>
        <el-button class="button3" type="danger" @click="manydelete"><i class="el-icon-delete"></i>批量删除</el-button>

    </div>
    <div class="list2">
        <el-table
        v-loading="loading"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
            prop="unitname"
            label="单元名称"
            width="120"
            align="center">
            </el-table-column>
            <el-table-column
            prop="buildnum"
            label="幢号"
            align="center">
            </el-table-column>
            <el-table-column
            prop="storeynum"
            label="楼层号"
            align="center">
            </el-table-column>
            <el-table-column
            prop="homenum"
            label="房号"
            align="center">
            </el-table-column>
            <el-table-column
            prop="homename"
            label="住客姓名"
            align="center">
            </el-table-column>
            <el-table-column
            prop="address"
            label="homestatus"
            align="center">
            <template slot-scope="scope">
                {{ scope.row.homestatus == 1 ?"已入住":"未入住" }}
            </template>
            </el-table-column>
            <el-table-column
            prop=""
            label="操作"
            align="center">
            <template slot-scope="scop">
                    <el-button type="primary" @click="numdetail(scop.row.id)"  plain>编辑</el-button>
                    <el-button type="danger" @click="delete1(scop.row.id)" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="list3">
        <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :page-sizes="[7, 10, 20, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: right;">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
    data(){
        return{
            //加载
            loading:true,
            //序号
            num:1,
             //选择器信息
            options: [{
                value: '1',
                label: '已入住'
                }, {
                value: '2',
                label: '未入住'
            }],
            //一次多删除数据
            manynumber:[],
            //第一行输入数据
            selectvalue:"",
            input1:"",
            input2:"",
            input3:"",
            input4:"",
            //载荷
            numberpage:{
                currPage: 0,
                pageNum: 10,
            },
            switchpage:{
                homestatus: "",
                unitname: "",
                buildnum: "",
                homenum: "",
                homename: "",
                currPage: "",
                pageNum: 10,
                token: sessionStorage.getItem("token"),
            },
            deletepage:{
                ids:[],
                token:sessionStorage.getItem("token")
            },
            //页数
            total:"",
            tableData:[],
        }
    },
    created(){
        this.numbermessage()
    },
    methods:{
        //初始化数据
        numbermessage(){
            this.loading = true
            this.$axios.get("http://community.byesame.com/house/gethouseList",{params:this.numberpage}).then((res)=>{
                console.log(res.data)
                this.total = res.data.total
                setTimeout(() => {
                    this.loading = false
                }, 500);
                this.tableData = res.data.data
                for(let i =0;i<this.tableData.length;i++){
                    this.tableData[i].num = i+1
                    if(this.tableData[i].buildnum==null){
                        this.tableData[i].buildnum = "暂无"
                    }
                    if(this.tableData[i].storeynum==null){
                        this.tableData[i].storeynum = "暂无"
                    }
                    if(this.tableData[i].homenum==null){
                        this.tableData[i].homenum = "暂无"
                    }
                    if(this.tableData[i].homename==null){
                        this.tableData[i].homename = "暂无"
                    }
                }
            })
        },
        //得到页面数据
        getnumbermessage(){
            this.loading = true
            this.$axios.get("http://community.byesame.com/house/searchnumList",{params:this.switchpage}).then((res)=>{
                console.log(res.data)
                this.total = res.data.total
                setTimeout(() => {
                    this.loading = false
                }, 500);
                this.tableData = res.data.data
                for(let i =0;i<this.tableData.length;i++){
                    this.tableData[i].num = i+1
                    if(this.tableData[i].buildnum==null){
                        this.tableData[i].buildnum = "暂无"
                    }
                    if(this.tableData[i].storeynum==null){
                        this.tableData[i].storeynum = "暂无"
                    }
                    if(this.tableData[i].homenum==null){
                        this.tableData[i].homenum = "暂无"
                    }
                    if(this.tableData[i].homename==null){
                        this.tableData[i].homename = "暂无"
                    }
                }
            })
        },
        //分页器方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.switchpage.pageNum = val
            this.getnumbermessage()
        },
        handleCurrentChange(val) {
            this.switchpage.currPage = val-1;
            this.getnumbermessage()
        },
        //查询
        lookfor(){
            this.switchpage.homestatus = this.selectvalue
            this.switchpage.unitname = this.input1
            this.switchpage.buildnum = this.input2
            this.switchpage.homenum= this.input3
            this.switchpage.homename = this.input4
            this.getnumbermessage()
        },
        //勾选
        handleSelectionChange(val) {
            console.log(val)
            this.manynumber = val
        },
        //删除
        delete1(id){
            console.log(111)
            this.$confirm('确定删除该单元信息？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$axios.get("http://community.byesame.com/house/delunitList",{params:{
                    id:id,
                    token:sessionStorage.getItem("token")
                }}).then((res)=>{
                    console.log(res)
                    this.numbermessage()
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                })
                
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });

            
        },
        //多项删除
        manydelete(){
            if(this.manynumber == ''){
                    this.$alert('请选择要删除的房号信息', '提示', {
                    confirmButtonText: '确定',
                    
                });
            }
            else{
                this.$confirm('确定删除该房间信息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                    for(let i =0;i<this.manynumber.length;i++){
                        this.deletepage.ids[i]=this.manynumber[i].id
                    }
                    console.log("批量删除2")
                    console.log(this.deletepage)
                    this.$axios.get("http://community.byesame.com/house/delnumList",{params:this.deletepage}).then((res)=>{
                        console.log(res)
                        console.log("批量删除")
                        this.numbermessage()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                    
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            }
        },
        //批量导出
        exportdata(){
            if(this.manynumber == ''){
                    this.$alert('请选择要导出的房号信息', '提示', {
                    confirmButtonText: '确定',
                    
                });
            }
            else{
                let data = []
                for(let i =0;i<this.manynumber.length;i++){
                    let a = {
                        "序号":"",
                        "单元名称":this.manynumber[i].unitname,
                        "幢号":this.manynumber[i].buildnum,
                        "楼层号":this.manynumber[i].storeynum,
                        "房号":this.manynumber[i].homenum,
                        "住客姓名":this.manynumber[i].houmename,
                        "状态":this.manynumber[i].homestatus == 1?"已入住":"未入住"
                    }
                    data[i]=a
                    
                }
                const worksheet = XLSX.utils.json_to_sheet(data) //传入要导出的表格数据
                // 表格数据
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook,worksheet,"data");//data为自定义表名
                XLSX.writeFile(workbook,"one.xlsx");//ond.xlsx  文件名
            }
            
        },
        //详情
        numdetail(editId){
            this.$router.push({
                path:"/house/numadd",
                query:{
                    editId:editId
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
 .list1{
        display: flex;
        padding-bottom:20px ;
        .input1{
            margin-right: 10px;
            flex: 10;
        }
        .input2{
            margin-right: 10px;
            flex: 10;
        }
        .select1{
            margin-right: 10px;
            flex: 10;
        }
        .button1{
            background-color: #409EFF;
            color: white;
            flex: 1;
        }
        .button2{
            flex: 2;
        }
        .button3{
            flex: 2;
        }
    }
    ::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}
</style>